Twig

{# Wrapper with two columns next to each other on desktop. Under each other on tablet / mobile #}
<div class="{{ component_class }}__something flex flex-col md:flex-row">

    <div class="{{ component_class }}__column {{ component_class }}__column--1 md:w-6/12 md:justify-start md:text-left text-center">
        something 1
    </div>

    <div class="{{ component_class }}__column {{ component_class }}__column--2 md:w-6/12 flex md:justify-end justify-center md:items-center">
        something 2
    </div>

</div>


{# Wrapper with two columns next to each other on desktop. Under each other on tablet / mobile #}
<div class="{{ component_class }}__something flex flex-col md:flex-row">

    <div class="{{ component_class }}__column {{ component_class }}__column--1 md:w-6/12 md:justify-start md:text-left text-center">
        something 1
    </div>

    <div class="{{ component_class }}__column {{ component_class }}__column--2 md:w-6/12 flex md:justify-end justify-center md:items-center">
        something 2
    </div>

</div>

{# Wrapper with three columns next to each other on desktop. Under each other on tablet / mobile #}
<div class="{{ component_class }}__something flex flex-col md:flex-row">

    <div class="{{ component_class }}__column {{ component_class }}__column--1 md:w-4/12 text-left">
        something 1
    </div>

    <div class="{{ component_class }}__column {{ component_class }}__column--2 md:w-4/12 text-left">
        something 2
    </div>

    <div class="{{ component_class }}__column {{ component_class }}__column--3 md:w-4/12 text-left">
        something 3
    </div>

</div>